<template>
    <div>
        <button @click='fn(0)'>h1</button>
        <button  @click='fn(1)'>h2</button>
        <!-- kepp-alive  和  component 都是内置组件 -->
        <keep-alive :include="/he/">
        <!--  
          凡是组件的name中有 he 的 都会被缓存 
          exclude 不缓存哪些组件
          max最大缓存数量
          -->
          <!-- <component :is="id1"></component> -->
          <ha v-if='true'></ha>
          <he v-else></he>
        </keep-alive>
        
    </div>
</template>
<script>
// @ is an alias to /src
import ha from './coms/h1'
import he from './coms/h2'
export default {
    name: 'XXX',
    data() {
        return {
          id1:ha
        }
    },
    methods: {
      fn(n){
        if(n==1){
          this.id1 = he
        }else{
          this.id1 = ha
        }
      }
    },
    components: {
        ha,he
    }
}
</script>
<style lang="less">

</style>